
<template>

  <div >      
     <Row>
        <Col span="17"><h1>审核失败列表</h1></Col>
        <Col span="1"><Button type="primary" size="large" @click="totalClick">全部</Button></Col>
        <Col span="6">
            <Input v-model="search">
                <Select v-model="select2" slot="prepend" style="width: 80px">
                    <Option value="name">姓名</Option>
                    <Option value="p_num">手机号</Option>
                    <Option value="c_num">身份证</Option>
                    <Option value="uid">编号</Option>
                </Select>
                <Button slot="append" icon="ios-search" @click="findOne"></Button>
            </Input>
        </Col>   
    </Row>    
    <Table :data="data1" border :columns="columns1" ref=table></Table>
    <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
            <Page :total="dataCount" :page-size="pageSize" show-total @on-change="changePage"></Page>
        </div>
    </div>
    <div id="img" v-on:click="click" hidden="true" class="center">
        <img id="img1"  />
    </div>  
  </div> 

</template>
<script>
export default {
    data() {
        return {
            pageSize:12,
            dataCount:0,
            select2:"name",
            search:"",
            bClick:true,
            historyDate:[],
            columns1: [
                {
                    title: "真实姓名",
                    key: "name",
                    width:90,
                    fixed: 'left'
                },
                {
                    title: "手机号码",
                    key: "p_num",
                    width:120,
                },
                {
                    title: "身份证号码",
                    key: "c_num",
                    width:150,
                },
                {
                    title: "年龄",
                    key: "age",
                    width:65,
                },  
                {
                    title: "级别",
                    key: "level",
                    render:(h,params)=>{
                        return h('div',function(){
                            switch(params.row.sex){
                                case 1:
                                return "联合创始人";
                                case 2:
                                return "执行董事";
                                case 3:
                                return "合伙人";
                                case 4:
                                return "钻石代理";
                            }
                        }())
                    },
                    width:100
                },              
                {
                    title: "性别",
                    key: "sex",
                    render:(h,params)=>{
                        return h('div',function(){
                            console.log(params.row.sex);
                            switch(params.row.sex){
                                case 0:
                                return "女";
                                case 1:
                                return "男";
                            }
                        }())
                    },
                    width:65
                },
                {
                    title: "身份证正面",
                    key: "certificate_url",
                    render: (h, params) => {
                        return h('div', {
                            attrs: {
                                style: 'width: 100px;height: 60px;'
                            },
                            on:{
                                click: ()=>{                                   
                                    let div = document.getElementById("img");                                  
                                    div.hidden = false;                         
                                    let img = document.getElementById("img1");
                                    img.src = params.row.certificate_url; 
                                    img.style = "width:1200px;height:600px";                                                            
                                }
                            }
                        }, 
                        [
                            h('img', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                attrs: {
                                    src: params.row.certificate_url, style: 'width: 100px;height: 60px;border-radius: 2px;'
                                },
                                style: {
                                },
                                
                            }),
                        ]);
                    },
                    width:150
                },
                {
                    title: "身份证反面",
                    key: "certificate_back_url",
                    render: (h, params) => {
                        console.log(params.row)
                        return h('div', {
                            attrs: {
                                style: 'width: 100px;height: 60px;'
                            },
                            on:{
                                click: ()=>{                                   
                                    let div = document.getElementById("img");                                  
                                    div.hidden = false;                         
                                    let img = document.getElementById("img1");
                                    img.src = params.row.certificate_back_url; 
                                    img.style = "width:1200px;height:600px";                                                            
                                }
                            }
                        }, [
                            h('img', {
                            props: {
                                type: 'primary',
                                size: 'small'
                            },
                            attrs: {
                                src: params.row.certificate_back_url, style: 'width: 100px;height: 60px;border-radius: 2px;'
                            },
                            style: {
                            },
                            }),
                        ]);
                    },
                    width:150
                },
                {
                    title: "开户银行",
                    key: "bank",
                    width:180
                },
                {
                    title: "银行卡号",
                    key: "b_num",
                    width:180
                },
                {
                    title: "支付宝账号",
                    key: "alipay",
                    width:180
                },
                {
                    title: "微信号",
                    key: "wechat",
                    width:180,
                    fixed:'right'
                }
            ],
            data1: []
        };
    },
    mounted() {
        let mid = localStorage.getItem("mid");
        if (mid == 'undefined' || mid == ''){
            alert("您还没有登陆");
            this.$router.push("admin");
            return;
        }
        if (mid.indexOf('1') < 0){
            alert("您没有权限");
            return;
        }  
        this.getUsers();
    },
    methods: {
        totalClick(){
            this.getUsers();
        },
        changePage(index){
            let start = (index - 1) * this.pageSize;
            let end = index * this.pageSize;
            this.data1 = this.historyDate.slice(start, end);
        },
        getUsers(){
            let qs = require('qs');
            this.axios({
                method: "post",
                url: `${this.adminUrl}/getBlackUsers`,
                data: qs.stringify({})
                }).then(response => {
                    this.historyDate = response.data.data;
                    this.dataCount = this.historyDate.length;
                    if (this.historyDate.length <= this.pageSize){
                        this.data1 = this.historyDate;
                    }else{
                        this.data1 = this.historyDate.slice(0, this.pageSize);
                    }
                }).catch(err =>{
                    console.log(err);
            });
        },
        findOne(){
            let data = {};
            switch(this.select2){
                case "name":
                    data["id"] = "name";                   
                break;
                case "p_num":
                    data["id"] = "p_num";
                break;
                case "c_num":
                    data["id"] = "c_num";
                break;
                case "uid":
                    data["id"] = "uid";
                break;
            }
            data["value"] = this.search;
            let qs = require('qs');
            this.axios({
                method: "post",
                url: `${this.adminUrl}/getBlackUsersByOne`,
                data: qs.stringify(
                    {id:data["id"], value:data["value"]}
                    )
                }).then(response => {
                    if ((response.data.result == 200)) {
                        this.historyDate = response.data.data;
                        this.dataCount = this.historyDate.length;
                        if (this.historyDate.length <= this.pageSize){
                            this.data1 = this.historyDate;
                        }else{
                            this.data1 = this.historyDate.slice(0, this.pageSize);
                        }
                    }else{
                        alert("请求失败");
                    }
                }).catch(err =>{
                    console.log(err);
            });
        },
        click(){
            let div = document.getElementById("img");
            div.hidden = true;                       
        }      
    }
};
</script>

   



<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.center{
    position: absolute;
    margin: 0 auto;
    align-self: center;
    top: 20%;
    left: 15%;
    z-index: 1;
}
</style>
